{% extends 'base.html' %}
{% load static %}

{% block title %}私信 - 本地有约{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <h2 class="mb-4"><i class="fas fa-envelope"></i> 私信</h2>
    
    <div class="row">
        <div class="col-md-4">
            <div class="card card-custom">
                <div class="card-header">
                    <h5 class="mb-0">会话列表</h5>
                </div>
                <div class="list-group list-group-flush" id="conversationList">
                    <div class="text-center py-4">
                        <div class="loader"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <div class="card card-custom">
                <div class="card-header">
                    <h5 class="mb-0" id="chatUsername">选择一个会话</h5>
                </div>
                <div class="card-body" style="height: 500px; overflow-y: auto;" id="messageArea">
                    <div class="empty-state">
                        <i class="fas fa-comments"></i>
                        <h3>开始聊天</h3>
                        <p>选择左侧会话或搜索用户开始聊天</p>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="input-group">
                        <input type="text" class="form-control" id="messageInput" placeholder="输入消息..." disabled>
                        <button class="btn btn-gradient-primary" onclick="sendMessage()" disabled id="sendBtn">
                            <i class="fas fa-paper-plane"></i> 发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 私信功能（简化版）
let currentChatUser = null;

function loadConversations() {
    // 这里应该调用API加载会话列表
    const conversations = {{ conversations|safe }} || [];
    
    const container = document.getElementById('conversationList');
    if (conversations.length === 0) {
        container.innerHTML = '<div class="text-center py-4 text-muted">暂无会话</div>';
    } else {
        container.innerHTML = conversations.map(user => `
            <a href="#" class="list-group-item list-group-item-action" onclick="openChat(${user.id}); return false;">
                <div class="d-flex align-items-center">
                    <img src="${user.avatar || '/static/img/default-avatar.png'}" class="user-avatar me-2">
                    <div>
                        <h6 class="mb-0">${user.nickname}</h6>
                        <small class="text-muted">点击查看消息</small>
                    </div>
                </div>
            </a>
        `).join('');
    }
}

function openChat(userId) {
    currentChatUser = userId;
    document.getElementById('messageInput').disabled = false;
    document.getElementById('sendBtn').disabled = false;
    // 加载聊天记录
    showSuccess('功能开发中...');
}

function sendMessage() {
    const message = document.getElementById('messageInput').value.trim();
    if (!message) return;
    
    // 发送消息API
    showSuccess('功能开发中...');
    document.getElementById('messageInput').value = '';
}

document.addEventListener('DOMContentLoaded', loadConversations);
</script>
{% endblock %}
